<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<title>Document</title>
	<script src="./js/react.min.js"></script>
	<script src="./js/react-dom.min.js"></script>
	<script src="./js/babel.min.js"></script>
</head>
<body>
	<div id="example">
		
	</div>
</body>
<script type="text/babel">
	{/*
		文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值,textarea 元素、select元素、radio元素都属于这种情况.
	*/}

	var Test = React.createClass({
		getInitialState(){
			return {
				value: '更改这个值试试'
			}
		},
		handleChange(event){
			console.log(event.target.value)
			{/*
				也可以通过获取目标来源方法来获取input的值
				event.target.value;
				this.setState({value: event.target.value})
			*/}
			this.setState({value: this.refs.getText.value})
		},
		render(){
			var textValue = this.state.value;
			return (
				<div>
					<input onChange={this.handleChange} ref='getText' value={textValue} />
					<p>{textValue}</p>
				</div>
			)
		}
	});
	ReactDOM.render(
		<Test></Test>,
		document.getElementById('example')
	);
</script>

</html>
